<template>
  <h4>{{ person }}</h4>
  <h1>{{ name }}</h1>
  <h1>{{ age }}</h1>
  <h1>{{ job.j1.salary }}</h1>
  <button @click="name += '-'">点击修改名字</button>
  <button @click="age++">点击修改年龄</button>
  <button @click="job.j1.salary++">涨</button>
</template>
  
<script>
import { reactive, toRef,toRefs } from "vue";

export default {
  name: "Demo",

  setup() {
    let person = reactive({
      name: "林润钿",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });

    const name1=person.name
    const name2=toRef(person,'name')
    console.log('name1',name1);  //林润钿
    console.log('name2',name2);  //ObjectRefImpl  能做响应式


    return {
      person,  //下面的是常用的
       /* name:toRef(person,'name'),
       age:toRef(person,'age'),
       salary:toRef(person.job.j1,'salary'), */
       //name:ref(person.name)  //错误的 虽然还是响应式 但只是对person.name这个字符串产生响应式 person里的数据不改变了
       ...toRefs(person)
    };
  },
};
</script>
  
  <style>
</style>
  